<template>
  <el-button :type="verDiff > verLimit ? 'warning' : 'info'" link size="small">
    <span class="content">
      <el-icon v-if="verDiff > verLimit"><CircleCloseFilled /></el-icon>
      <el-icon v-else><CircleCheckFilled /></el-icon>
      <b v-if="show">{{ verDiff }}</b>
      <span>秒前</span>
    </span>
  </el-button>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs";
import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";
const commonStore = useCommonStore();
const seatStore = useSeatStore();

const verLimit = ref(120);
const verDiff = ref(0);

const show = ref(true);
const resetShow = async () => {
  verDiff.value = commonStore.isReal
    ? (
        (new Date().getTime() -
          seatStore.seatStatusReciveTime +
          seatStore.seatStatusFreshness) /
        1000
      ).toFixed(0)
    : 0;
  show.value = false;
  await nextTick();
  show.value = true;
};
const timmer = ref(null);
onMounted(() => {
  timmer.value = setInterval(() => resetShow(), 2000);
});

onUnmounted(() => {
  clearInterval(timmer.value);
  timmer.value = null;
});
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
}

.content > *:not(last-child) {
  margin-right: 4px;
}
</style>
